<template>
  <div>
    <div style="position: absolute;height:130px;overflow: hidden">
      <img src="../../../assets/images/index_bg.png" style="width: 100%;">
    </div>
    <div style="position: absolute;width: 95%;left:0;right:0;margin: auto;padding-top:20px;">
      <div class="info" @click="toInfo" v-if="isShow">
        <div class="info-img">
          <img :src="info.user.head_url?info.user.head_url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3705310863,2037219726&fm=26&gp=0.jpg'">
        </div>
        <div class="info-text">
          <h4>{{info.user.nick}}</h4>
          <p>姓名：{{info.user.name}}</p>
        </div>
      </div>
      <flexbox orient="vertical" style="padding-top:15px;">
        <flexbox-item><div class="flex-demo">
          <h4 class="order">
            <span>我的订单</span>
            <div @click="getOrder(-1)" class="more">查看全部<i class="iconfont icon-xiayiye"></i></div>
          </h4>
          <div class="order-list">
            <!--<div class="order-item" @click="getOrder(0)">-->
              <!--<i class="iconfont icon-dengdaifukuan"></i>-->
              <!--<p>待付款</p>-->
            <!--</div>-->
            <div class="order-item" @click="getOrder(0)">
              <i class="iconfont icon-daiqueren"></i>
              <p>待确认</p>
            </div>
            <div class="order-item" @click="getOrder(1)">
              <i class="iconfont icon-fahuojihua"></i>
              <p>待发货</p>
            </div>
            <div class="order-item" @click="getOrder(2)">
              <i class="iconfont icon-daishouhuo"></i>
              <p>待收货</p>
            </div>
            <div class="order-item" @click="getOrder(3)">
              <i class="iconfont icon-qianshou"></i>
              <p>已签收</p>
            </div>
          </div>
          </grid>
        </div></flexbox-item>
        <flexbox-item><div class="flex-demo">
          <router-link to="/project1/view2/cart" class="item-list">
            <span>
              <i class="iconfont icon-daohanggouwuche icon"></i>
              <span class="text">我的购物车</span>
            </span>
            <i class="iconfont icon-xiayiye"></i>
          </router-link>
          <router-link to="/project1/view3/address" class="item-list">
            <span>
              <i class="iconfont icon-dizhi1 icon"></i>
              <span class="text">地址管理</span>
            </span>
            <i class="iconfont icon-xiayiye"></i>
          </router-link>
          <router-link to="/project1/view3/message" class="item-list">
            <span>
              <i class="iconfont icon-xiaoxi icon"></i>
              <span class="text">系统消息</span>
            </span>
            <i class="iconfont icon-xiayiye"></i>
          </router-link>
          <div class="item-list">
            <span>
              <i class="iconfont icon-kefuwangwang icon"></i>
              <span class="text">帮助与客服</span>
            </span>
            <i class="iconfont icon-xiayiye"></i>
          </div>
          <router-link to="/project1/view3/set" class="item-list">
            <span>
               <i class="iconfont icon-shezhi1 icon"></i>
              <span class="text">设置</span>
            </span>
            <i class="iconfont icon-xiayiye"></i>
          </router-link>
        </div></flexbox-item>
      </flexbox>
    </div>
  </div>
</template>

<script>
  import { Panel, Group, Cell, Grid, GridItem } from 'vux'
  export default {
    name: "Main",
    components: {
      Panel, Group, Cell, Grid, GridItem
    },
    created(){
      this.info = this.config1.globalInfo
      console.log(this.config1.globalInfo)
      this.isShow = true
    },
    methods: {
      // 个人资料
      toInfo(){
        this.$router.push('/project1/view3/info')
      },
      // 查看订单
      getOrder(state){
        this.$router.push({
          name: '/project1/view3/order',
          params: {
            state: state
          }
        })
      }
    },
    data () {
      return {
        type: '1',
        info:{},
        isShow:false
      }
    },
  }
</script>

<style scoped lang="less">
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  *{
    font-family: 微软雅黑;
  }
  .info{
    height:50px;
    padding:0 0.5rem;
    .info-img{
      height:50px;
      width:50px;
      border-radius: 50%;
      border:3px #aeffeb solid;
      float: left;
      overflow: hidden;
      img{
        height:100%;
        width:100%;
      }
    }
    .info-text{
      float: left;
      width: 70%;
      color:#fff;
      h4{
        line-height:25px;
        padding-left: 1rem;
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow:ellipsis;
      }
      p{
        line-height:25px;
        padding-left: 1rem;
        font-size:0.8rem;
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow:ellipsis;
      }
    }
  }
  .flex-demo{
    background: #fff;
    border-radius: 5px;
    padding: 0.5rem;
    box-shadow: 0 0 10px #bbbbbd;
    margin-top:5px;
    .order{
      line-height:2rem;
      font-size:1rem;
      .more{
        font-weight: normal;
        color: #33bb99;
        font-size: 0.8rem;
        float: right;
      }
    }
    .order-list{
      display: flex;
      width: 100%;
      justify-content: space-around;
      padding:0.5rem 0;
      .order-item{
        font-size: 0.8rem;
        text-align: center;
        .iconfont{
          color:#33bb99;
          font-size:1.8rem;
        }
        p{
          color:#000;
        }
      }
    }
    .item-list{
      font-size:1rem;
      display: flex;
      justify-content: space-between;
      line-height:2.5rem;
      color:#666;
      span{
        .iconfont.icon{
          color:#33bb99;
          font-size: 1.3rem;
          font-weight: 400;
        }
        .text{
          padding-left:0.5rem;
        }
      }
    }
  }

</style>
